import React, { Component } from 'react';
import { Image, TouchableOpacity, View, ImageBackground, Text, StatusBar, Platform } from 'react-native';
import { unitWidth, statusBarHeight } from '../constants/AdapterUtil';
import { Header } from 'react-native-elements';
import Colors from '../constants/Colors';
import Swiper from 'react-native-swiper';
import { saveImage } from '../constants/SaveFile';
import Permissions from 'react-native-permissions';
import ImageViewer from 'react-native-image-zoom-viewer';
import { CommonModal } from '../components/Modal';

export default class BigImageListScreen extends Component {

    constructor(props) {
        super(props);
        const { navigation } = this.props;
        this.state = {
            imageList: navigation.getParam('imageList', []),
            index: navigation.getParam('index', 0),
            saveUrl: '',
        }
    }

    // render() {
    //     var imgListView = [];
    //     for (let i = 0, len = this.state.imageList.length; i < len; i++) {
    //         imgListView.push(
    //             <TouchableOpacity style={{ flex: 1 }}
    //                 activeOpacity={0.7}
    //                 key={i}
    //                 onPress={() => { this.props.navigation.pop() }}
    //                 onLongPress={() => {
    //                     this.setState({
    //                         saveUrl: this.state.imageList[i]
    //                     }, () => {
    //                         this.refs.CommonModal.showModal();
    //                     })
    //                 }}>
    //                 <ImageBackground key={i} style={{
    //                     flex: 1,
    //                     justifyContent: 'center',
    //                     alignItems: 'center',
    //                 }} source={{ uri: this.state.imageList[i] }} resizeMode='contain'>
    //                 </ImageBackground>
    //             </TouchableOpacity>
    //         )
    //     }

    //     return (
    //         <View style={{ flex: 1, backgroundColor: Colors.black }}>
    //             <Swiper style={{}} showsButtons={false} dotColor={Colors.white} index={this.state.index} onIndexChanged={index => {
    //                 this.setState({
    //                     index: index
    //                 })
    //             }} loop={false}>
    //                 {imgListView}
    //             </Swiper>
    //             {/* <TouchableOpacity style={{ position: 'absolute', right: 30 * unitWidth, top: 30 * unitWidth }}
    //                 onPress={() => {
    //                     saveImage(this.state.imageList[this.state.index].url)
    //                 }}>
    //                 <Text style={{ color: Colors.white }}>保存</Text>
    //             </TouchableOpacity> */}
    //             <CommonModal ref='CommonModal' title='是否保存图片' comfirmText='是' cancelText='否'
    //                 comfirmClick={() => {
    //                     this.refs.CommonModal.hideModal();
    //                     this.requestPhoto(this.state.saveUrl)
    //                 }} />
    //         </View>
    //     );
    // }

    render() {
        var imgListView = [];


        for (let i = 0, len = this.state.imageList.length; i < len; i++) {
            imgListView.push(
                { key: i, url: this.state.imageList[i] }
            )
        }
        return (
            <View style={{ flex: 1, backgroundColor: Colors.black }}>
                <StatusBar
                    animated={false} //指定状态栏的变化是否应以动画形式呈现。目前支持这几种样式：backgroundColor, barStyle和hidden
                    hidden={false}  //是否隐藏状态栏。
                    translucent={true}//指定状态栏是否透明。设置为true时，应用会在状态栏之下绘制（即所谓“沉浸式”——被状态栏遮住一部分）。常和带有半透明背景色的状态栏搭配使用。
                    barStyle={'light-content'} // enum('default', 'light-content', 'dark-content')
                    backgroundColor={'rgba(0,0,0,0)'}
                />
                <ImageViewer
                    onSave={(url) => {
                        console.log(url)

                        // this.loading()
                        this.state.url = url
                        this.requestPhoto(url)

                    }}
                    menuContext={{ saveToLocal: '保存到手机', cancel: '取消' }}
                    // saveToLocalByLongPress={false}
                    index={this.state.index}
                    imageUrls={imgListView} />
                <TouchableOpacity onPress={() => this.props.navigation.pop()} style={{ alignItems: 'center', justifyContent: 'center', width: 40 * unitWidth, height: 40 * unitWidth, position: 'absolute', top: statusBarHeight + 5 * unitWidth }} >
                    <Image source={require("../res/back.png")} style={{ width: 9 * unitWidth, height: 18 * unitWidth }}></Image>
                </TouchableOpacity>

            </View>
        );
    }


    requestPhoto(url) {
        try {
            Permissions.request('photo', {
                type: 'always',
            }).then(response => {
                console.log(response)
                if (response === 'authorized') {
                    saveImage(url)
                }
            }).catch(err => {
                console.log(err)
            })
        } catch (err) {
            console.log(err);
        }
    }
}